<?php
	require_once "top.php";
?>
<link rel="stylesheet" type="text/css" href="css/tipped/tipped.css" />
<!--link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css" /-->

		<div class="proyectos-div">
			<div class="proyectos-imagenes">
				
					<!-- PARTE DINAMICA -->
					<?php
						//$_POST["idCategoria"]
						//$_POST["nombreCategoria"]
						$sqlProyectos = "SELECT pro.id AS id, pro.nombre AS nombre, pro.ubicacion AS ubicacion, pro.fecha AS fecha, pro.observaciones AS texto".
											" FROM ".TABLE_PROYECTOS." as pro".
											" WHERE pro.categoria_id = ".$_POST["idCategoria"].
											" ORDER BY pro.orden";
						
						$rows = $db->query($sqlProyectos);
						
						if ($rows) {
						/*
							$imagenes = "";
							$descripciones = "";
							*/
							while ($record = $db->fetch_array($rows)) {
								
								$nombreProyecto = str_replace(" ", "_", $record["nombre"]);
								$nombreCategoria = str_replace(" ", "_",$_POST["nombreCategoria"]);
								/*
								$imagenes = $imagenes . '<div class="proyecto-div">'
											.'<div class="imagen-proyecto">'
												.'<img id="proyecto'.$record["id"].'" alt="Hola que tal." src="images/portfolio/'.strtolower($nombreCategoria).'/'.strtolower($nombreProyecto).'/thumbs/portada.jpg" alt="'.$record["nombre"].'" />'
											.'</div>'
											.'<span class="nombreProyecto" style="display: none;">'.$nombreProyecto.'</span>'
										.'</div>';
								$descripciones = $descripciones . '<div>'
											.'<div class="descripcion-proyecto">'
												.'<p>'.$record["texto"].'</p>'
											.'</div>'
										.'</div>';
								*/
								
								echo '<div class="proyecto-div">'
											.'<div class="imagen-proyecto">'
												.'<img id="proyecto'.$record["id"].'" alt="Hola que tal." src="images/portfolio/'.strtolower($nombreCategoria).'/'.strtolower($nombreProyecto).'/thumbs/portada.jpg" alt="'.$record["nombre"].'" />'
											.'</div>'
											.'<div class="descripcion-proyecto">'
												.'<p>'.$record["texto"].'</p>'
											.'</div>'
											.'<span class="nombreProyecto" style="display: none;">'.$nombreProyecto.'</span>'
										.'</div>';
										
										
							}
							
							//echo $imagenes;
							
						}
					
					?>
					<!--
				<div>
					<img src="images/thumbs2/1.jpg" alt="Thumb 1" />
					
					<div class="tooltip" style="display:none">
						<p>UBICACION: Ciudad Jard�n 1345, esq. Castro Barros, Buenos Aires (1435)</p>
						<p>NOMBRE: Torre Beta</p>
						<p>FECHA: 24/07/2013</p>
					</div>
				</div>
				-->
			</div>
		</div>
		
		<div id="imagenes-del-proyecto" style="display: none;"></div>
		<!-- The JavaScript -->
		<!--[if lt IE 9]>
		  <script type="text/javascript" src="../js/excanvas/excanvas.js"></script>
		<![endif]-->
		<script type="text/javascript" src="js/spinners/spinners.min.js"></script> <!-- optional -->
		<script type="text/javascript" src="js/tipped/tipped.js"></script>
		<!--script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script-->
		
		<script type="text/javascript">
		function replaceAll(str) {
			  return str.replace(/\s/g, "_");
		}
		
		function centrarProyectos() {
			var altoFotos = 250;
		
			if ($(".proyectos-imagenes").innerWidth() < window.innerWidth) {
				margenIzq = ( window.innerWidth - $(".proyectos-imagenes").innerWidth() ) / 2;
				margenSup = ( window.innerHeight - altoFotos) / 2;
				
				$(".proyectos-imagenes").css("margin", "0px 30px 0 " + margenIzq + "px");
				$(".proyectos-div").css("margin", margenSup + "px 0 0 0");
			} else {
				margenSup = ( window.innerHeight - altoFotos) / 2;
				$(".proyectos-imagenes").css("margin", "0px 30px 0 30px");
				$(".proyectos-div").css("margin", margenSup +"px 0 0 0");
			}
		}
			$(function() {
				var margenIzq = 0;
				//tuneo de scrollbar
				//$('.proyectos-div').jScrollPane();
				
				
				//TOBI LE DOY ANCHO A LA CAJA DE PROYECTOS
				var ancho = 0;
				$(".proyectos-imagenes .proyecto-div").each(function() {
					ancho += $(this).innerWidth();
					$(".proyectos-imagenes").css("width", ancho+"px");
				});
				
				//TOBI REDIMENSIONADO Y SENTRADO DE PROYECTOS CUANDO SON POCOS
				$( window ).resize(function() {
					centrarProyectos();
				});
				centrarProyectos();
				
				$('.proyectos-imagenes img').each(function(pos, element){
					//Tipped.create($(this), $(this).next().html(),  { skin: 'black' });
					//$(document).tooltip();	
				});
				
				$('.proyectos-imagenes img').click(function() {
					
					var idProyecto = $(this).attr("id").replace("proyecto","");
					var nombreCategoria = replaceAll('<?php echo $_POST["nombreCategoria"];?>' ) ;
 					var nombreProyecto = $(this).parent().parent().find(".nombreProyecto").text().replace(" ", "_");
					
					//$('#imagenes-del-proyecto').load("fotosProyectos.php"); 
					$.ajax({
						url: "fotosProyectos.php",
						type: "POST",
						data: { 'idProyecto': idProyecto, "nombreProyecto": nombreProyecto, "nombreCategoria": nombreCategoria },
						dataType: "html",
						success: function(result) {
							$('#imagenes-del-proyecto').html(result); 
						}
					});
					
					$abrirPopupImagenes();
				});
			});
			
			function $abrirPopupImagenes() {
				$(".proyectos-div").hide();
				$("#imagenes-del-proyecto").show();
			}
			
			function $cerrarPopupImagenes() {
				$("#imagenes-del-proyecto").hide();
				$(".proyectos-div").show();
			}
        </script>
